<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    爱好：
    <select v-model="hobby">
      <option value="">请选择</option>
      <option value="0">唱</option>
      <option value="1">跳</option>
      <option value="2">rep</option>
    </select>
    <hr>
    年份：
    <select v-model="date.year">
      <option value="">请选择</option>
      <option value="2023">2023</option>
      <option value="2024">2024</option>
      <option value="2025">2025</option>
    </select>
    月份：
    <select v-model="date.month">
      <option value="">请选择</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </div>

  <script type="module">
    import { createApp, ref, reactive, watchEffect } from '../vue.esm-browser.js'
    createApp({
      setup() {
        const hobby = ref('') //爱好
        const date = reactive({ //日期
          year: '2023',
          month: '4'

        })
        watchEffect(() => {
          console.log('监听开始');
          if (date.year == '2025') {
            console.log('2025');
          }
          if (hobby.value == '1') {
            console.log('唱');
          }
          console.log('监听结束');
        })
        return { hobby, date }
      }
    }).mount('#app')

  </script>
</body>

</html>